<template>
	
	<ServerLogSearch></ServerLogSearch>
	
	<Table border :columns="columns" :data="data">
		
		<template #action="{ row, index }">
			<Button type="primary" icon="ios-search" size="small" style="margin-right: 5px"
				@click="show(index)">查看</Button>
		</template>
		
		<template #status="{ row, index }">
			<DotTag type="primary" v-if="row.status">成功</DotTag>
			<DotTag type="error" v-else>失败</DotTag>
		</template>
		
		<template #footer>
			<div style="min-width: 300px; max-width: 380px;">
				<van-pagination v-model="page" :total-items="total" 
						:items-per-page="pageSize" 
						:show-page-size="5" force-ellipses />
			</div>
		</template>
	</Table>
	
	<Drawer
		title="查看"
		v-model="drawer"
		width="720"
		:mask-closable="false"
		:styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
		
		<!-- 引入菜单表单组件 -->
		<ServerLogDetail></ServerLogDetail>
		
		<div class="demo-drawer-footer">
			<Button style="margin-right: 8px" @click="drawer = false">关闭</Button>
		</div>
		
	</Drawer>
	
</template>

<script>

import ServerLogDetail from '../components/log/ServerLogDetail.vue'
import DotTag from '../components/DotTag.vue'
import VanPagination from '../components/VanPagination.vue' 
import ServerLogSearch from '../components/log/ServerLogSearch.vue'
export default {
	data () {
		return {
			page: 1, 
			total: 110, 
			pageSize: 10, 
			drawer: false, 
			columns: [
				 {
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					title: '日志编号',
					key: 'id'
				},
				{
					title: '系统模块',
					key: 'module'
				},
				{
					title: '请求方式',
					key: 'method'
				},
				{
					title: '操作人员',
					key: 'user'
				},
				{
					title: '操作地址',
					key: 'ip'
				},
				{
					title: '操作地点',
					key: 'address'
				},
				{
					title: '操作时间',
					key: 'createTime'
				},
				{
					title: '操作状态',
					key: 'status', 
					slot: 'status'
				},
				{
					title: '操作地址',
					slot: 'action',
					width: 100,
					align: 'center'
				},
			],
			data: [
				{	
					id: 3322, 
					module: '用户管理', 
					method: 'GET', 
					user: 'admin',
					createTime: '2023-04-09 11:12:33',
					status: '成功', 
					ip: '10.11.23.56',
					address: '北京市海淀区',
				},
				{
					id: 3321, 
					module: '用户管理', 
					method: 'GET', 
					user: 'admin',
					createTime: '2023-04-09 11:12:33',
					status: '成功', 
					ip: '10.11.23.56',
					address: '北京市海淀区',
				},
			],
		}
	},
	methods: {
		show(index) {
			this.drawer = true ;
		}
	},
	components: {
		ServerLogDetail, 
		DotTag,
		VanPagination, 
		ServerLogSearch
	}
}
</script>

<style>
.demo-drawer-footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 1px solid #e8e8e8;
	padding: 10px 16px;
	text-align: right;
	background: #fff;
}
</style>